<template>
    <div class="mains">
        <div class="titles">我的收藏</div>
        <div>
            <div class="toggle" v-if="checkRole(['admin', 'contentUser'])">
                <div class="left">
                    <div class="title" @click="toggle('tuwen')" :class="{ 'orange': tuwen }">图文</div>
                    <div class="title" @click="toggle('content')" :class="{ 'orange': content }">这里是内容</div>
                </div>
                <div class="right">共<span style="color:#68A1FF;">98</span>篇内容</div>
            </div>
        </div>
        <div class="content" v-if="tuwen">
            <div class="list" v-for="v in 5">
                <div><img :src="zhanwei"></div>
                <article class="list_content">
                    <div class="list_title">孙思邈中医药领域中药文献《千金要方》</div>
                    <div class="list_zhaiao">孙思邈 (581-682年) : 著名的唐代医学家，他的著作《千金要方》被认为是中医药领域的重要文献，系统性地介绍了草药和药方孙思邈(581-682年) :
                        著名的唐代医学家，他的著作《千金要方》被认为是中医药领域的重要文献，系统性地介绍了草药和药方。</div>
                    <div class="list_key">关键词:中医名家、千金药方、肺炎支原体 上呼吸道感染 支原体抗体</div>
                    <div class="list_time">郑州大学第一附属医院创作 <span style="padding-left: 20px;">2023-10-26 15:23:23</span></div>
                </article>
                <div style="padding-top: 84px;"><el-button type="primary" plain @click="noCollect()">取消收藏</el-button></div>
            </div>
            <div class="page"><el-pagination background layout="prev, pager, next" :total="1000"></el-pagination></div>
        </div>
        <div v-if="content" class="box">这里是内容</div>
    </div>
</template>

<script>
import { checkPermi, checkRole } from "@/utils/permission"; // 权限判断函数
export default {
    data() {
        return {
            tuwen: true,
            content: false,
            zhanwei: require('@/assets/images/pic_txt.png')
        }
    },
    created() { },
    methods: {
        toggle(handle) {
            if (handle == 'tuwen') {
                this.tuwen = true
                this.content = false
            }
            if (handle == 'content') {
                this.tuwen = false
                this.content = true
            }
        },
        noCollect() {
            this.$message.success('取消收藏');
        },
        checkPermi,
        checkRole,
    },

}
</script>

<style lang='scss' scoped>
.mains {
    background-color: white !important;

    // padding-left: 200px;
    .titles {
        font-size: 16px;
        font-family: Microsoft YaHei, Microsoft YaHei;
        font-weight: 700;
        color: #3D3D3D;
        line-height: 21px;
        padding: 30px 0 0 32px;
    }

    .toggle {
        display: flex;
        // justify-content: space-between;
        align-items: center;
        padding-left: 64px;
        padding-top: 26px;
        cursor: pointer;

        .left {
            display: flex;
            align-items: center;

            .title {
                font-size: 12px;
                line-height: 22px;
                font-family: Microsoft YaHei, Microsoft YaHei;
                font-weight: 400;
                color: #BDBDBD;
                width: 100px;
                height: 26px;
                text-align: center;
                background: #FFFFFF;
                border-radius: 3px;
                border: 1px solid #DCDCDC;
            }

            .orange {
                border: 1px solid #D5A771;
                color: #D5A771;
            }
        }

        .right {
            padding-left: 450px;
        }

    }

    .content {
        padding-left: 64px;
        padding-top: 30px;

        .list {
            display: flex;
            // align-items: center;
            padding-top: 20px;
            padding-bottom: 21px;
            border-bottom: 1px solid #f5f5f5;

            .list_content {
                padding-left: 40px;
                padding-right: 101px;
                font-family: Microsoft YaHei, Microsoft YaHei;
                width: 507px;

                .list_title {
                    font-size: 16px;
                    font-weight: 700;
                    color: #3D3D3D;
                    line-height: 22px;
                }

                .list_zhaiao {
                    padding-top: 16px;
                    font-size: 12px;
                    font-weight: 400;
                    color: #333333;
                    line-height: 22px;
                }

                .list_key {
                    padding-top: 16px;
                    font-size: 12px;
                    font-weight: 400;
                    color: #666666;
                    line-height: 16px;
                }

                .list_time {
                    padding-top: 11px;
                    font-size: 12px;
                    font-weight: 400;
                    color: #333333;
                    line-height: 16px;
                }
            }
        }
    }

    .box {
        padding-left: 64px;
        padding-top: 30px;
    }

    .page {
        padding: 40px 0 80px 0;
        display: flex;
        // justify-content: space-around;
    }
}
</style>